<template>
    <div>
        <div class="flex items-center pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
            文章标题: <b>{{ props.ruleForm.name }}</b>
        </div>
        <div class="pt-5px pb-5px pl-26px pr-26px">
            <el-divider content-position="left">关键词替换</el-divider>
        </div>
        <div class="flex items-center ml-26px mr-26px friendly-tips">
            <svg-icon size="18px"
                icon-class="information-2-fill"></svg-icon>友情提示：主关键词为本文章主要产品名称，可替换关键词为代替主关键词生成新的文章，最多可以填写<el-text type="danger">10</el-text>个。
        </div>
        <div class="pl-26px pt-46px pt-26px">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px">
                <el-form-item label="文章主关键词" prop="mainKeyword">
                    <div class="w-200px">
                        <el-input ref="nameRef" v-model="props.ruleForm.mainKeyword" placeholder="请输入文章主关键词" />
                    </div>
                </el-form-item>
                <el-form-item label="替换文章关键词" prop="keywords">
                    <div class="flex flex-wrap">
                        <div class="w-200px mr-12px mb-5px" v-for="(item, index) in ruleForm.keywords" :key="index"><el-input v-model="ruleForm.keywords[index]" /></div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="pl-146px pb-40px pt-15px">
            <el-button @click="handlePure">上一步</el-button>
            <el-button type="primary" @click="handleNext(ruleFormRef)">下一步</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { checkMainKeywordApi } from '@/api/b2b'
import { hasDuplicate,hasItem } from '@/utils/index'

const props = defineProps<{
    modelValue: number
    ruleForm: any
}>()

const emit = defineEmits(['update:modelValue', 'step-2-complete'])

// 使用 computed + watch 实现双向绑定效果
const step = ref(props.modelValue)

watch(
    () => props.modelValue,
    (newVal) => {
        if (typeof newVal === 'number') {
            step.value = newVal
        }
    }
)

const ruleFormRef = ref()

const rules = reactive<any>({
    mainKeyword: [
        { min: 3, max: 35, required: true, message: '请输入文章标题', trigger: 'blur', validator: checkMainKeyword }
    ],
    keywords: [
        { trigger: 'blur', validator: checkKeywords }
    ],
})

async function checkMainKeyword(rule: any, value: any, callback: any) {
    if(value === ''){
        callback(new Error('请填写主关键词'))
    }else{
        const res: ResType = await checkMainKeywordApi({
            Keyword: props.ruleForm.mainKeyword
        })
        if(res.code === 200){
            callback()
        }
        callback()
    }
    
}

function checkKeywords() {
    const isHasDup = hasDuplicate(props.ruleForm.keywords)
    if(props.ruleForm.keywords && props.ruleForm.mainKeyword){
        const isHasItem = hasItem(props.ruleForm.keywords, props.ruleForm.mainKeyword)
        if(isHasItem){
            ElMessage.error('替换关键词不能与主关键词重复')
            return false
        }
    }
   
    if(isHasDup){
        ElMessage.error('替换关键词不能重复')
        return false
    }else{
       return true
    }
}

function handlePure() {
    emit('update:modelValue', step.value)
}

async function handleNext(formEl: FormInstance | undefined) {
    //检测 主关键词必填 + 替换关键词里不能重复且与主关键词不能重复
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            if(checkKeywords()){
                const newStep = step.value + 1
                step.value = newStep
                emit('step-2-complete', props.ruleForm)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>

<style scoped>

</style>